<div class="col-lg-8 col-lg-offset-1">
    <button type="button" class="btn btn-success add-btn" (click)="openModal(template);add()">Add</button>
</div>
<div class="data-table col-lg-8 col-lg-offset-1">
    <!-- <h2 class="table-caption">Technologies:</h2> -->
    <div class="table-column-group col-lg-8">
        <div class="table-column col-lg-1"></div>
        <div class="table-column col-lg-2"></div>
        <div class="table-column col-lg-3"></div>
        <div class="table-column col-lg-3"></div>
        <div class="table-column col-lg-3"></div>
    </div>
    <div class="table-header-group">
        <ul class="table-row row">
            <li class="table-cell col-lg-1">ID</li>
            <li class="table-cell col-lg-2">Name</li>
            <li class="table-cell col-lg-3">Create Date</li>
            <li class="table-cell col-lg-3">Update Date</li>
            <li class="table-cell col-lg-3">Operations</li>
        </ul>
    </div>
    <div class="table-row-group" *ngFor="let technologiy of technologies; trackBy:indexTracker">
        <ul class="table-row row">
            <li class="table-cell col-lg-1">{{technologiy.id}}</li>
            <li class="table-cell col-lg-2">{{technologiy.name}}</li>
            <li class="table-cell col-lg-3">{{technologiy.createDate}}</li>
            <li class="table-cell col-lg-3">{{technologiy.updateDate}}</li>
            <li class="table-cell col-lg-3">
                <a class="update-btn" href="javascript:void(0);" (click)="openModal(template);update(technologiy)">Update</a>
                <a class="delete-btn" href="javascript:void(0);" (click)="openModal(deletetemplate);deleteId = technologiy.id">delete</a>
            </li>
        </ul>
    </div>
    <!-- <div class="table-footer-group">
        <ul class="table-row">
            <li class="table-cell">footer</li>
            <li class="table-cell">footer</li>
            <li class="table-cell">footer</li>
        </ul>
    </div> -->
</div>

<!-- 模态框   信息删除确认 -->
<!-- <button type="button" class="btn btn-primary" (click)="openModal(template)">模态框</button> -->

<ng-template #template>
    <div class="modal-header">
        <h4 class="modal-title pull-left">Technologies</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
      <span aria-hidden="true">&times;</span>
    </button>
    </div>
    <div class="modal-body">
        <form class="form-horizontal" [formGroup]="technologiesForm" [hidden]="action == 'saved'">
            <div class="form-group">
                <label class="col-lg-1 col-lg-offset-1 control-label" for="name">Name</label>
                <div class="col-lg-4">
                    <input type="text" class="form-control" [(ngModel)]="name" formControlName="name" placeholder="Please input name">
                </div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" (click)="save()">Save</button>
        <button type="button" class="btn btn-outline-primary" (click)="modalRef.hide()">Cancel</button>
    </div>
</ng-template>


<ng-template #deletetemplate>
    <div class="modal-header">
        <h4 class="modal-title pull-left">Delete Notice</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
      <span aria-hidden="true">&times;</span>
    </button>
    </div>
    <div class="modal-body">
        Do you confirm to delete this record?
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" (click)="delete(deleteId)">Confirm</button>
        <button type="button" class="btn btn-outline-primary" (click)="modalRef.hide()">Cancel</button>
    </div>
</ng-template>

<!-- /.modal-dialog -->